{% extends 'base.html' %}
{% load mytags %}
{% load humanize %}
{% block content %}
{% include 'nav_cat_bar.html' %}

<div class="wrapper wrapper-content" xmlns="http://www.w3.org/1999/html">
    <div class="row">
        <div class="col-sm-10">

            <div class="ibox-content">
                <div class="">
                    <a id="read_btn" class="btn btn-sm btn-primary "> 标记已读 </a>
                    <a id="del_btn" class="btn btn-sm btn-danger "> 删除所选 </a>
                </div>

                <table class="table table-striped table-bordered table-hover " id="editable" >
                    <thead>
                        <tr>
                            <th class="text-center">
                                <input type="checkbox" id="select_all" name="select_all">
                            </th>
                            <th class="text-left">主题</th>
                            <th class="text-left">时间</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for message in messages.object_list %}
                        <tr class="gradeX">
                            <td class="text-center">
                                <input class="shiftCheckbox" type="checkbox"  name="selected" value="{{ message.id }}">
                            </td>
                            <td class="text-left">
                                {% if message.status == '1' %}
                                    <a href="{% url 'message_detail' %}?id={{ message.message.id }}&usermessage_id={{ message.id }}" style="color: #0e9aef">{{ message.message.subject }}</a>
                                {% else %}
                                    <a href="{% url 'message_detail' %}?id={{ message.message.id }}&usermessage_id={{ message.id }}" style="color: rgba(59, 59, 59, 0.61)">{{ message.message.subject }}</a>
                                {% endif %}
                            </td>
                            <td class="text-left" width="15%">
                                {{ message.message.create_time }}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="dataTables_info" id="editable_info" role="status" aria-live="polite">
                            Showing {{ messages.start_index }} to {{ messages.end_index }} of {{ p.count }} entries
                        </div>
                    </div>
                    {% include 'paginator.html' %}
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}
{% block self_head_css_js %}
    {% load staticfiles %}
    <script src="{% static 'js/jquery.shiftcheckbox.js' %}"></script>
{% endblock %}
{% block self_footer_js %}
<script>
    $(document).ready(function(){
        $('#show').click(function(){
            $('#show').css('display', 'none');
            $('#more').css('display', 'block');
        });
        $('#read_btn').click(function(){
            var check_array = [];
            if (confirm("确定已读")) {
                $(".gradeX input:checked").each(function() {
                    check_array.push($(this).attr("value"))
                });
                $.get("{% url 'message_read' %}",
                    {id: check_array.join(",")},
                    function(result){
                        alert(result);
                        parent.location.reload();
                    }
                )
            }
        });
        $('#del_btn').click(function(){
            var check_array = [];
            if (confirm("确定删除")) {
                $(".gradeX input:checked").each(function() {
                    check_array.push($(this).attr("value"))
                });
                $.get("{% url 'message_del' %}",
                    {id: check_array.join(",")},
                    function(result){
                        alert(result);
                        $(".gradeX input:checked").closest("tr").remove();
                    }
                )
            }
        });

        $("tbody tr").shiftcheckbox({
            checkboxSelector: 'input:checkbox',
            selectAll: $('#select_all'),
            ignoreClick: 'a'
        });
        $('.shiftCheckbox').shiftcheckbox();
    });
</script>
{% endblock %}